@import url(./lib/normalize-css/normalize.css);
@import url(./lib/bootstrap/dist/css/bootstrap.css);
@import url(./lib/font-awesome/css/font-awesome.css);
/**
 * Base
 * 
 * As the name suggest, base is the core.
 * Initialize variable and resets should be found in this directory.
 *
 * Style guide base
 */
/**
 * Reset.
 *
 * Additional reset styles.
 *
 * Style guide base.reset
 */
* {
  box-sizing: border-box; }

body {
  height: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%; }

input[type="text"] {
  border: 0; }

.form-label {
  margin-bottom: 0; }

/**
 * Breakpoints.
 * 
 * Set of variables to make media query easy.
 *
 * Available breakpoints are:
 *  - ``$bkpt-s`` : 20em (320px, given font size of 16px)
 *  - ``$bkpt-m`` : 50em (800px, given font size of 16px)
 *  - ``$bkpt-l`` : 90em (1440px, given font size of 16px)
 * Use it like an usual media-query.
 *
 * Examples:
 *  @media screen and (max-width: $bkpt-m) {}
 *  @media screen and (max-width: $bkpt-l) {}
 *  @media screen and (min-width: $bkp-s) and (max-width: $bkpt-m) {}
 *
 * Markup: breakpoints.hbs
 *
 * Style guide: base.breakpoints
 */
/**
 * Colors.
 *
 * Set of color variables that compose the application.
 *
 * Markup: colors.hbs
 *
 * Style guide base.colors
 */
/**
 * Visibility.
 *
 * Show/hide an element
 *
 * Style guide base.visibility
 */
/**
 * Show.
 *
 * Render an element visible.
 *
 * Style guide base.visibility.show
 */
.show, .fold-form--unfolded {
  visibility: visible;
  opacity: 1;
  width: auto; }

/**
 * Hide.
 *
 * Render an element hidden.
 *
 * Style guide base.visibility.hide
 */
.hide, .fold-form--folded {
  visibility: hidden;
  opacity: 1;
  width: 0; }

/**
 * Components
 *
 * Components are partials of the page.
 *
 * Style guide components
 */
/**
 * Debug.
 *
 * Debug component
 *
 * Markup: debug.hbs
 *
 * Style guide components.debug
 */
.debug {
  border: 1px solid red; }

/**
 * Fold components.
 *
 * Fold/unfold action.
 *
 * Markup: fold.hbs
 *
 * Style guide components.fold
 */
.fold-form--folded {
  padding: 0; }

.fold-form--unfolded {
  padding: 1rem; }

.fold-content--folded {
  outline: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  width: 5rem; }

.fold-content--unfolded {
  outline: none;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
  width: 25rem;
  text-decoration: none; }

/**
 * Form.
 *
 * Define form component.
 *
 * Style guide components.form
 */
.form {
  /**
     * Form fieldset
     *
     * Default fieldset style
     *
     * Markup: form_fieldset.hbs
     *
     * Style guide components.form.fieldset
     */
  /**
     * Form label.
     *
     * Default label style.
     *
     * Markup: form_label.hbs
     *
     * Style guide components.form.label
     */
  /**
     * Form input.
     *
     * Default input style.
     *
     * Markup: form_input.hbs
     *
     * Style guide components.form.input
     */
  /**
     * Form action.
     *
     * Default action button style.
     * 
     * Markup: form_action.hbs
     *
     * Style guide components.form.action
     */
  /**
     * Form error.
     *
     * Default error form style.
     *
     * Markup: form_error.hbs
     *
     * Style guide components.form.error
     */ }
  .form-fieldset {
    margin-bottom: 1vh;
    width: 100%; }
  .form-label {
    height: 4.7rem;
    line-height: 5rem;
    width: 5rem;
    text-align: center; }
  .form-input {
    font-size: 1.4rem;
    padding-left: .5rem; }
  .form-action {
    height: 5vh;
    margin-top: 1rem; }
  .form-error {
    line-height: 3rem; }

/**
 * Icon component.
 * 
 * Style guide components.icon
 */
.icon {
  color: #fefefe;
  /**
     * Default icon.
     *
     * Default icon style.
     *
     * Markup: icon_default.hbs
     *
     * Style guide components.icon.default
     */
  /**
     * Add icon.
     *
     * Icon rotate to be a cancel icon.
     *
     * Markup: icon_add.hbs
     *
     * Style guide components.icon.add
     */ }
  .icon-default {
    width: 1rem;
    height: 100%;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear; }
  .icon-add {
    width: 1rem;
    height: 100%;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
    -webkit-transform: scale(1) rotate(225deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
            transform: scale(1) rotate(225deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); }

.fa-discord {
  background: url("./images/icons/icon-discord.svg") top left no-repeat;
  height: 2rem;
  width: 2rem; }

/**
 * Regions
 *
 * Regions are modules of the page.
 *
 * Style guide regions
 */
/**
 * App.
 *
 * Defines the main app region
 *
 * Markup: app.hbs
 *
 * Style guide regions.app
 */
.app {
  width: 100%;
  max-width: 120em;
  height: 90%; }

/**
 * Chat
 *
 * Defines the chat region
 *
 * Markup: chat.hbs
 *
 * Style guide regions.chat
 */
.chat {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  width: 100%; }
  @media screen and (max-width: 90em) {
    .chat {
      width: 100%; } }
  .chat-iframe {
    width: 100%;
    height: 99%;
    border: 0; }

/**
 * Content
 *
 * Defines the content region
 *
 * Markup: content.hbs
 *
 * Style guide regions.content
 */
.content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 92vh;
  margin: 0px auto; }
  .content-fullscreen {
    width: 100%;
    height: 100%; }
  .content-primary {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 70%;
        -ms-flex-preferred-size: 70%;
            flex-basis: 70%;
    height: 100%; }
  .content-secundary {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 30%;
        -ms-flex-preferred-size: 30%;
            flex-basis: 30%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%; }
  .content-empty {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    height: 100%; }
  .content-social {
    position: absolute;
    right: 0; }
  .content-button--add {
    width: 20rem;
    height: 20rem; }

/**
 * Header.
 *
 * Defines the header region
 *
 * Markup: header.hbs
 *
 * Style guide regions.header
 */
.header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  height: 8vh;
  border-bottom: 0.5vh solid #68a7e1;
  width: 100%; }

/**
 * Tab
 *
 * Tab region
 *
 * Style guide regions.tab
 */
.tab {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 8vh;
  margin-left: auto;
  border-bottom: 0.5vh solid #a8ccee;
  /**
     * Tab list
     *
     * Markup: tab_list.hbs
     *
     * Style guide regions.tab.list
     */
  /**
     * Tab form.
     *
     * Form to manage tabs.
     *
     * Markup: tab_form.hbs
     *
     * Style guide regions.tab.form
     */
  /**
     * Actions available for a tab.
     *
     * Style guide regions.tab.action
     */ }
  .tab-list {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 10vh;
    width: 70%; }
    @media screen and (max-width: 50em) {
      .tab-list {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 0;
        width: 100%; } }
  .tab-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 1em;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style-type: none;
    text-transform: capitalize; }
    @media screen and (max-width: 50em) {
      .tab-item {
        width: 100%; } }
    .tab-item--link {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      height: 5vh;
      text-align: center;
      width: 10rem; }
      @media screen and (max-width: 50em) {
        .tab-item--link {
          text-align: center;
          width: 100%; } }
    .tab-item--add {
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      min-width: 3rem; }
  .tab-form {
    /**
         * Form tab header.
         *
         * Style guide regions.tab.form.header
         */
    /**
         * Form tab fieldset.
         *
         * Style guide regions.tab.form.fieldset
         */
    /**
         * Form tab label.
         *
         * Style guide regions.tab.form.label
         */
    /**
         * Form tab input.
         *
         * Style guide regions.tab.form.input
         */
    /**
         * Form tab submit.
         *
         * Style guide regions.tab.form.submit
         */ }
    .tab-form--header {
      height: 4vh;
      width: 100%; }
    .tab-form--fieldset {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 1vh; }
    .tab-form--label {
      position: absolute;
      width: 5rem; }
    .tab-form--input {
      margin-left: 5rem; }
    .tab-form--action {
      width: 100%; }
  .tab-action {
    margin-left: auto;
    margin-right: 0.3rem; }

/**
 * Video
 *
 * Defines the video region
 *
 * Markup: video.hbs
 *
 * Style guide regions.video
 */
.video {
  width: 100%;
  height: 99%; }
  @media screen and (max-width: 90em) {
    .video {
      width: 100%; } }
  .video-iframe {
    border: 0;
    width: 100%;
    height: 100%; }

/**
 * Social.
 *
 * Defines the social links region
 *
 * Markup: social.hbs
 *
 * Style guide regions.social
 */
.social {
  background: #fefefe;
  border-bottom: 0.5vh solid #68a7e1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%; }
  .social-list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 0;
    height: 100%;
    width: 15vh; }
  .social-item {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-basis: 5rem;
        -ms-flex-preferred-size: 5rem;
            flex-basis: 5rem;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style-type: none;
    text-align: center; }
    .social-item--link {
      color: #fefefe; }
  .social-icon {
    font-size: 2rem; }

/**
 * Dependencies
 *
 * Dependencies are modules of the page.
 *
 * Style guide dependencies
 */
/**
 * Theme.
 *
 * Compose the theme by adding colors.
 *
 *
 * Style guide dependencies.theme
 */
body {
  background-color: #080808;
  color: #fefefe; }

/**
 * Form theme
 *
 * Style guide dependencies.theme.form
 */
.form {
  /**
     * Form label theme
     *
     * Markup: theme_form_label.hbs
     *
     * Style guide dependencies.theme.form.label
     */
  /**
     * Form input theme
     *
     * Markup: theme_form_input.hbs
     *
     * Style guide dependencies.theme.form.input
     */
  /**
     * Form submit theme
     *
     * Markup: theme_form_submit.hbs
     *
     * Style guide dependencies.theme.form.submit
     */
  /**
     * Form cancel theme
     *
     * Markup: theme_form_cancel.hbs
     *
     * Style guide dependencies.theme.form.cancel
     */
  /**
     * Form error theme
     *
     * Markup: theme_form_error.hbs
     *
     * Style guide dependencies.theme.form.error
     */
  /**
     * Form unfolded
     *
     *
     * Style guide dedendencies.them.form.unfolded
     */ }
  .form-label--name {
    background-color: #68a7e1;
    color: #fefefe; }
  .form-label--twitch {
    background-color: #6441a5;
    color: #fefefe; }
  .form-label--kageshi {
    background-color: #b4e8ff;
    color: #080808; }
  .form-label--youtube {
    background-color: #e52d27;
    color: #fefefe; }
  .form-label--facebook {
    background-color: #3b5998;
    color: #fefefe; }
  .form-label--twitter {
    background-color: #55acee;
    color: #fefefe; }
  .form-label--discord {
    line-height: 6rem;
    background-color: #738bd7;
    color: #fefefe; }
  .form-input {
    width: 100%;
    background-color: #343434;
    color: #9f9f9f;
    border-bottom: .5rem solid transparent; }
    .form-input--tabname:focus {
      border-bottom: 0.5rem solid #68a7e1; }
    .form-input--twitch:focus {
      border-bottom: 0.5rem solid #6441a5; }
    .form-input--kageshi:focus {
      border-bottom: 0.5rem solid #b4e8ff; }
    .form-input--youtube:focus {
      border-bottom: 0.5rem solid #e52d27; }
    .form-input--facebook:focus {
      border-bottom: 0.5rem solid #3b5998; }
    .form-input--twitter:focus {
      border-bottom: 0.5rem solid #55acee; }
  .form-submit {
    background-color: #447ca1;
    border: 1px solid #447ca1;
    color: #fefefe; }
  .form-cancel {
    background-color: #a54b42;
    border: 1px solid #a54b42;
    color: #fefefe; }
  .form-error {
    padding: 1em;
    background-color: #a54b42; }
  .form-unfolded {
    background: #222;
    border: 1px solid #454545;
    height: 56vh;
    padding: 1rem;
    position: absolute;
    z-index: 2;
    right: 1px;
    top: 8vh;
    -webkit-transition: width 0.4s ease-in;
    transition: width 0.4s ease-in;
    width: 30rem; }

/**
 * Link theme
 *
 * Style guide dependencies.theme.link
 */
.link {
  /**
     * Link to trigger fold
     *
     * Markup: theme_link_fold.hbs
     *
     * Style guide dependencies.theme.link.fold
     */
  /**
     * Link to trigger unfold
     *
     * Markup: theme_link_unfold.hbs
     *
     * Style guide dependencies.theme.link.unfold
     */ }
  .link-fold {
    background-color: #447ca1 !important;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
    color: #fefefe;
    margin-left: auto;
    padding: 1rem;
    text-decoration: none; }
    .link-fold--hover {
      color: #fefefe; }
  .link-unfold {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #a54b42 !important;
    border-top-left-radius: .5em;
    border-bottom-left-radius: .5em;
    color: #fefefe;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 4vh;
    -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
            justify-content: space-around;
    margin-left: auto;
    text-decoration: none;
    text-decoration: none;
    width: 100%; }
    .link-unfold--hover {
      color: #fefefe; }

/**
 * Tab theme
 *
 * Style guide dependencies.theme.tab
 */
.tab {
  background-color: #121212;
  /**
     * Tab theme default link
     *
     * Markup: theme_tab_link.hbs
     *
     * Style guide dependencies.theme.tab.link
     */
  /**
     *  Tab when grouped
     *
     * Markup: theme_tab_grouped.hbs
     *
     * Style guide dependencies.them.tab.grouped
     */
  /**
     * Tab theme active link
     *
     * Markup: theme_tab_active.hbs
     *
     * Style guide dependencies.theme.tab.active
     */ }
  .tab-link {
    background-color: #343434;
    color: #ddd; }
    .tab-link:hover {
      background-color: #111;
      color: #ddd;
      text-decoration: none; }
  .tab-item--grouped {
    width: 3rem;
    color: transparent;
    border: 1px solid lightblue;
    background-color: #565656; }
  .tab-active {
    background-color: lightblue;
    color: #111; }
    .tab-active:hover {
      text-decoration: none;
      color: #111; }

.social-item {
  color: #fefefe; }
  .social-item--facebook {
    background: #3b5998; }
  .social-item--youtube {
    background: #e52d27; }
  .social-item--twitter {
    background: #55acee; }
  .social-item--discord {
    background: #738bd7; }

.empty-button {
  background-color: #111111;
  background-image: -webkit-linear-gradient(top, #131313, #111111);
  background-image: linear-gradient(to bottom, #131313, #111111);
  background-position: center center;
  background-repeat: no-repeat;
  border: 0.3rem dashed #171616;
  border-radius: 50%;
  opacity: 0.4; }
  .empty-button--icon {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    color: #212121;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 10vh;
    height: 100%;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%; }

/*# sourceMappingURL=base.css.map */
